<template>
  <el-popover
    v-model:visible="popoverStatus"
    trigger="click"
    width="590px"
    placement="bottom-end"
  >
    <template #reference>
      <el-button type="primary" @click="showPopover"> 保存 </el-button>
    </template>
    <el-form
      class="article_form"
      ref="articleFormRef"
      :rules="articleRules"
      :model="articleForm"
      label-width="110px"
    >
      <el-form-item label="文章分类：" prop="articleClass">
        <el-select
          v-model="articleForm.articleClass"
          placeholder="请选择文章分类"
        >
          <el-option
            v-for="item in classOption"
            :label="item.typeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文章封面：" prop="articleLabels">
        <el-upload
          class="avatar-uploader"
          :action="`${baseUrl}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="articleForm.articleImg"
            :src="articleForm.articleImg"
            class="avatar"
          />
          <div class="upload_icon" v-else>
            <span
              class="iconify"
              data-icon="ant-design:plus-outlined"
              style="color: #ccc"
              data-width="50"
            >
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章标签：" prop="articleLabels">
        <DynamicTag
          :dynamicTags="articleForm.articleLabels"
          @changeDynamicTag="changeDynamicTag"
        />
      </el-form-item>
      <el-form-item label="文章摘要：" prop="articleAbstract">
        <el-input
          class="abstract"
          v-model="articleForm.articleAbstract"
          maxlength="100"
          show-word-limit
          type="textarea"
          resize="none"
        />
      </el-form-item>

      <el-form-item label="保存为：">
        <el-check-tag
          class="check_tag"
          :checked="item.value == articleForm.articleStatus"
          @change="statusChange(item.value)"
          v-for="item in statusList"
          :key="item.value"
        >
          {{ item.label }}
        </el-check-tag>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-if="!id" @click="submitArticleForm">
          添加文章
        </el-button>
        <el-button type="primary" v-else @click="submitArticleForm">
          修改文章
        </el-button>
      </el-form-item>
    </el-form>
  </el-popover>
</template>
<script setup lang="ts">
// vue 框架插件
import { reactive, ref, PropType, onMounted } from 'vue'

import { baseUrl } from '@/config/index'
// api 接口
import {
  addArticleApi,
  getArticleTypeListApi,
  updateArticleApi,
} from '@/api/article'

// 组件

import DynamicTag from '@/components/DynamicTag.vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
const articleFormRef = ref()

const props = defineProps({
  id: {
    default: '',
  },
  articleForm: {
    type: Object as PropType<any>,
    default: {} as any,
  },
})
// 保存按钮弹框的状态
const popoverStatus = ref(false)

// 分类选择的props参数
const classOption = ref<any[]>([])
let statusList = ref([
  { label: '草稿', value: 1 },
  {
    label: '发布',
    value: 2,
  },
])

let articleRules = reactive({
  articleClass: [
    {
      required: true,
      message: '请选择文章分类',
      trigger: 'change',
    },
  ],
  articleImg: [
    {
      required: true,
      message: '请上传文章封面',
      trigger: 'change',
    },
  ],
  articleLabels: [
    {
      required: true,
      message: '请输入文章标签',
      trigger: 'change',
    },
  ],
  articleAbstract: [
    {
      required: true,
      message: '请输入文章摘要',
      trigger: 'change',
    },
  ],
})
onMounted(() => {
  getArticleType()
})
// 获取文章分类
const getArticleType = async () => {
  let res: any = await getArticleTypeListApi()
  if (res.status == 0) {
    classOption.value = res.data
  }
}

const showPopover = () => {
  console.log(props.articleForm.articleTitle, 'articleForm.articleTitle')
  if (!props.articleForm.articleTitle) {
    ElMessage.error(`请输入文章标题`)
    return
  }
  if (!props.articleForm.articleContent) {
    ElMessage.error(`请输入文章内容`)
    return
  }
  popoverStatus.value = !popoverStatus.value
}
const statusChange = (status: any) => {
  props.articleForm.articleStatus = status
}

const changeDynamicTag = (labels: string[]) => {
  props.articleForm.articleLabels = labels
}

const handleAvatarSuccess = (res: any) => {
  if (res.status == 0) {
    props.articleForm.articleImg = res.url
  }
}
const submitArticleForm = () => {
  articleFormRef.value.validate(async (valid: any) => {
    if (valid) {
      let requst = null
      if (!props.id) {
        requst = addArticleApi
      } else {
        requst = updateArticleApi
      }

      let res: any = await requst({ ...props.articleForm, id: props.id })
      if (res.status == 0) {
        ElMessage.success(`${!props.id ? '添加' : '修改'}文章成功`)
        router.go(-1)
      }
    }
  })
}
</script>
<style scoped lang="scss">
.article_form {
  margin: $mainMargin;
  width: 560px;
}
::v-deep(.el-textarea__inner) {
  width: 443px;
  height: 119px;
}
.check_tag {
  margin-left: 10px;
  &:first-child {
    margin-left: 0;
  }
}
.avatar-uploader .avatar {
  width: 160px;
  height: 86px;
  display: block;
}
::v-deep(.el-upload) {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 160px;
  height: 86px;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.upload_icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
